<template>
  <div>
    <div class="pie">
      <div id="pie1">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main1" style="float:left;width:100%;height: 300px"></div>
      </div>
    </div>
  </div>
</template>

<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
      dataList1: [],
      dataName: [],
      data: [],
      loading: false,
      url: {
        queryPage: '/baoxiu/repaire/getGoodsTotal'
      }
      // tableData: [],
      // queryForm: {
      //   dialogFormVisible: false,
      //   data: {
      //     currentPage: 1,
      //     pageSize: 10,
      //     buildName: ''
      //   }
      // }
    }
  },
  created () {
    this.init1()
  },
  mounted () {
    // this.initData()
  },
  methods: {
    init1 () {
      this.loading = true
      this.$http
        .get(this.$http.adornUrl(this.url.queryPage))
        .then(({data}) => {
          console.log(data, 'data')
          this.loading = false
          for (let i = 0; i < data.length; i++) {
            this.dataList1.push({name: data[i].goodsName, value: data[i].total})
            this.dataName.push(data[i].goodsName)
          }
          console.log(this.dataList1, 'dataList1')
        }).finally(_ => {
          this.initData()
        })
    },
    // 初始化数据
    initData () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '报修物品统计',
          subtext: '纯属虚构',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '70%',
          y: 'center',
          data: this.dataName
        },
        series: [
          {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.dataList1,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
